<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由基本用法</title>
    <style>
         /*.router-link-active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }*/
        .active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="itany">
        <div>
            <!--使用router-link组件来定义导航，to属性指定链接url-->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>

        <div>
            <!--router-view 用来显示路由内容-->
            <router-view></router-view>
        </div>
    </div>


    <script>

        //1.定义组件
        var Home = {
            template : '<h3>我是主页</h3>'
        }

        var News = {
            template : '<h3>我是新闻</h3>'
        }

        //2.配置路由
        const routes = [
            //指定路径和组件模板
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'} //重定向
        ]

        //3.创建路由实例
        const router = new VueRouter({
            routes, //简写，相当于routes:routes。这是起名正好重了，可以简写
            //mode : 'history' //更改模式，默认为hash
            linkActiveClass : 'active' //更改活动链接的class类名
        });

        //根据根实例并将路由挂载到Vue实例上
        var vm = new Vue({
            el : '#itany',
            router //注入录入，简写，相当于router : router
        });
    </script>
</body>
</html>